<template>
  <div id="acceptanceOneEvent-two" class="tabs">
    <div class="title">代办查询</div>
    <div class="tabhead">
      <el-form ref="form" :model="form" label-width="80px" inline size="small">
        <el-form-item label="区域:">
          <el-select v-model="form.type" placeholder="请输入用户区域" style="width: 210px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构:">
          <el-select v-model="form.type" placeholder="请输入用户机构" style="width: 210px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="事项:">
          <el-select
            v-model="form.type"
            placeholder="请输入用户事项"
            style="width: 210px"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="搜索:">
          <el-input v-model="form.tel" placeholder="请输入事件名称或咨询人名称" style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchData()">点击搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border size="mini" :header-cell-style="tabHeader">
        <el-table-column label="排序" width="60px">
          <template slot-scope="scope">
            <span>{{ scope.row.index }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属机构">
          <template slot-scope="scope">
            <span>{{ scope.row.jigou }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实施清单名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实施编码">
          <template slot-scope="scope">
            <span>{{ scope.row.bianma | ellipsis }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时限">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事项类型">
          <template slot-scope="scope">
            <span>{{ scope.row.shijian }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="340px">
          <template slot-scope="scope">
            <div style="display: flex; padding: 0 20px; box-sizing: border-box">
              <el-button type="primary" @click="del(scope.row.tel)">查看事项基本信息</el-button>
              <el-button type="success" @click="del(scope.row.tel)">登记办件基本信息</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="tabpage">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          hide-on-single-page
          :page-size="pageSize"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { tabHeader } from '@/config/config';

  export default {
    name: 'acceptanceOneEvent-two',
    data() {
      return {
        tabHeader: tabHeader,
        total: 20,
        currentPage: 1,
        pageSize: 5,
        tableData: [
          {
            index: '1',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '2',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '3',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '4',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '5',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '6',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '7',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '8',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '9',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          },
          {
            index: '10',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可'
          }
        ],
        form: {
          nickname: '',
          tel: '',
          userId: '',
          type: ''
        },
        options: [
          { id: 1, label: '团长' },
          { id: 2, label: '团员' },
          { id: 3, label: '王麻子' }
        ]
      };
    },
    filters: {
      ellipsis(value) {
        if (!value) return '';
        if (value.length > 12) {
          return value.slice(0, 12) + '...';
        }
        return value;
      }
    },
    methods: {
      searchData() {},
      del() {},
      handleCurrentChange(page) {
        console.log(page);
        this.currentPage = page;
      }
    }
  };
</script>

<style lang="scss">
  @import '../../../assets/css/publicList.scss';
</style>
